<template>
	<view class="myservice">
		<view class="myservice-head">
			<up-tabs :list="list1" :current="actTab" @click="changeTab"></up-tabs>
		</view>
		<view class="myservice-content">
			<view class="serve-content">
				<view class="serve-list">
					<view class="serve-item" v-for="(item,index) in trackList">
						<view class="serve-master" @click="skipDetail(item.order_id)">
							<image class="masterpic"  :src="$BASE_URL+item.service_banner"></image>
							<view class="master-tit">
								<text>{{item.service_name}}</text>
							</view>
							<view class="serve-status status-line">
								<image v-if="item.status==0" class="pic" src="/static/img/my/zixun.png"></image>
								<image v-if="item.status==1" class="pic" src="/static/img/my/success.png"></image>
								<text>{{item.status_name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const actTab = ref(0);
	const params = ref({
		page:1,
		limit:1000
	});
	const trackList = ref([]);
	// all全部  0咨询中  1已成交   2已结束
	const list1 = ref([{
						name: '全部',
						state: "all"
					},
					{
						name: '咨询中',
						state: 0
					},
					{
						name: '已成交',
						state: 1
					},
					{
						name: '已结束',
						state: 2
					},
				]);
	function changeTab(e) {
		console.log('e: ', e)
		actTab.value
		getData(list1.value[e.index].state)
	}
	function skipDetail(type) {
		// 1移民,2留学3企业
		uni.navigateTo({
			url: '/pages/my/service/detail?order_id=' + type
		})
	}
	function getData(state) {
		proxy.$request({
			url: 'api/User/getMyServiceLists',
			header: "application/x-www-form-urlencoded",
			data: {
				page:params.value.page,
				limit:params.value.limit,
				// 1收藏  2浏览足迹
				type:1,
				status:state,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				if(res.data){
					trackList.value=res.data
				}
	
			}
		})
	}
	getData('all')
</script>

<style lang="scss" scoped>
	.myservice-head {
		::v-deep .u-tabs__wrapper__nav__item {
			padding: 0 50rpx !important;
		}
	}

	.myservice-content {
		.serve-item {
			padding: 10rpx 32rpx;

			.serve-master {

				position: relative;

				.masterpic {
					width: 100%;
					height: 304rpx;
				}

				.master-tit {
					position: absolute;
					left: 0;
					right: 0;
					width: 100%;
					text-align: center;
					top: 0;
					height: 304rpx;
					line-height: 304rpx;

					text {
						font-size: 36rpx;
						font-weight: bold;
						color: #fff
					}

				}


				.serve-status {
					position: absolute;
					right: 0;
					top: 40rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 120rpx;
					height: 40rpx;
					padding-left: 10rpx;
					border-top-left-radius: 40rpx;
					border-bottom-left-radius: 40rpx;

					image {
						// margin-left: 10rpx;
						height: 28rpx;
						width: 28rpx;
					}

					text {
						color: #fff;
						font-size: 24rpx;
						margin-left: 6rpx;
					}
				}

				.status-success {
					background: #3988FF;
				}

				.status-line {
					background: #FF7139;
				}

				.status-off {
					background: #999999;
				}
			}
		}

	}
</style>